<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/WEB-INF/jsp/manage/commons/taglibs.jsp" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>

<link rel="stylesheet" type="text/css" href="/resources/ace/css/cacheCloud-self.css"/>
<div class="container">
    <br/>
    <form method="post" action="/admin/app/index?appId=${appDesc.appId}&tabTag=big_key" id="bigKeyList" >
        <div class="row">
            <div style="float:right">
                <div class="form-group">
                    <label style="font-weight:bold;text-align:left;">
                        &nbsp;查询日期2:&nbsp;&nbsp;
                    </label>
                    <input type="text" style="display: inline-block; width: 156px" class="form-control" size="20" name="searchDate" id="searchDate" value="${searchDate}"
                        onFocus="WdatePicker({startDate:'%y-%M-01',dateFmt:'yyyy-MM-dd',alwaysUseStartDate:true})"/>
                    <input type="hidden" name="appId" value="${appDesc.appId}">
                    <input type="hidden" name="tabTag" value="big_key">
                    <input type="hidden" name="pageNo" id="pageNo" value="${pageNo}">
                    <label type="submit">&nbsp;<input type="submit" class="btn btn-info" class="btn-4" value="查询" /></label>
                </div>
            </div>
        </div>
    </form>

    <div class="row">
        <div class="col-md-12">
            <div class="page-header cache-title">
                <span class="cache-title-color"></span>
                <h4>大key列表</h4>
            </div>
            <table class="table table-striped table-hover cache-table" id="table">
                <thead>
                <tr>
                    <td>序号</td>
<%--                    <td>应用ID</td>--%>
                    <td>实例ID</td>
                    <td>IP</td>
                    <td>端口</td>
                    <td>key</td>
                    <td>类型</td>
                    <td>长度</td>
                    <td>时间</td>
                </tr>
                </thead>
                <tbody>
                <c:forEach items="${appBigKeyList}" var="key" varStatus="stats">
                    <tr>
                        <td>${stats.index + 1}</td>
<%--                        <td>${key.appId}</td>--%>
                        <td>${key.instanceId}</td>
                        <td>${key.ip}</td>
                        <td>${key.port}</td>
                        <td>${key.bigKey}</td>
                        <td>${key.type}</td>
                        <td>${key.length}</td>
                        <td><fmt:formatDate value="${key.createTime}" pattern="yyyy-MM-dd"/></td>
                    </tr>
                </c:forEach>
                </tbody>
            </table>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div  style="margin-bottom: 10px;float: right;margin-right: 15px">
					<span>
						<ul id='ccPagenitor' style="margin-bottom: 0px;margin-top: 0px"></ul>
						<div id="pageDetail" style="float:right;padding-top:7px;padding-left:8px;color:#4A64A4;display: none">共${page.totalPages}页,${page.totalCount}条</div>
					</span>
            </div>
        </div>
    </div>

</div>
<jsp:include page="/WEB-INF/include/foot.jsp"/>

<script type="text/javascript" src="/resources/js/mem-cloud.js"></script>

<script src="/resources/bootstrap/paginator/bootstrap-paginator.js"></script>
<script src="/resources/bootstrap/paginator/custom-pagenitor.js"></script>
<script type="text/javascript">
    $(function(){
        //分页点击函数
        var pageClickedFunc = function (e, originalEvent, type, page){
            //form传参用pageSize
            document.getElementById("pageNo").value = page;
            document.getElementById("bigKeyList").submit();
        };
        //分页组件
        var element = $('#ccPagenitor');
        //当前page号码
        var pageNo = '${page.pageNo}';
        //总页数
        var totalPages = '${page.totalPages}';
        //显示总页数
        var numberOfPages = '${page.numberOfPages}';
        var options = generatePagenitorOption(pageNo, numberOfPages, totalPages, pageClickedFunc);
        if(totalPages > 0){
            element.bootstrapPaginator(options);
            document.getElementById("pageDetail").style.display = "";
        }else{
            element.html("未查询到相关记录！");
        }
    });
</script>

